<!--有审批-->
<template>
  <div class="template-body">
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >{{ $store.getters.getBreadcrumb("level1").name }}</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/orderManagement' }"
          >订单管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-if="$route.query.type == 2"
          :to="{
            path: '/orderManagement/close/un-closed'
          }"
          >订单台账</el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-if="$route.query.type == 1"
          :to="{
            path: '/orderManagement/close/un-closed'
          }"
          >订单关闭</el-breadcrumb-item
        >

        <el-breadcrumb-item>
          <span class="ccui-curr-crumb">查看 发货单详情</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="ccui-app-container-detail">
      <div class="ccui-app-container-detail-body">
        <el-tabs v-model="activeName" class="el-tabs__customize">
          <el-tab-pane label="基本信息" name="a">
            <!--          基本信息项-->
            <el-group-title class="d_jump">
              <template slot="groupTitle">
                <el-form
                  :model="form"
                  ref="formDateBUI"
                  label-width="160px"
                  class="ccui-form"
                >
                  <el-col
                    v-for="(item, index) in basicInfo"
                    :span="item.colSpan || 12"
                    :key="index"
                  >
                    <el-form-item :label="item.label + '：'">
                      <div :title="basicInfoObj[item.label]" class="ellipsis">
                        {{ basicInfoObj[item.value] }}
                      </div>
                    </el-form-item>
                  </el-col>
                </el-form>
              </template>
            </el-group-title>
          </el-tab-pane>
          <el-tab-pane label="发货单跟踪" name="b">
            <verticalTimeLine
              ref="sendOutRoad"
              :stepsData="testData"
              :timelineItemProps="timelineItemProps"
            ></verticalTimeLine>
          </el-tab-pane>
          <el-tab-pane label="发货信息" name="c">
            <el-table
              :data="tableData"
              border
              max-height="99999"
              class="ccui-form-child-table"
              ref="materialList"
            >
              <el-table-column
                v-for="(item, i) in tableColumnContractList"
                :label="item.label"
                :type="item.type"
                :prop="item.prop"
                :width="item.width"
                :align="item.align"
                :fixed="item.fixed"
                :key="i"
                :show-overflow-tooltip="true"
              />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="发货清单" name="d">
            <el-table
              :data="tableDataList"
              border
              max-height="99999"
              class="ccui-form-child-table"
              ref="tableDataList"
            >
              <el-table-column
                v-for="(item, i) in tableColumnList"
                :label="item.label"
                :type="item.type"
                :prop="item.prop"
                :width="item.width"
                :align="item.align"
                :fixed="item.fixed"
                :key="i"
                :show-overflow-tooltip="true"
              />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="发货附件" name="e">
            <detailAttachment ref="attachment"></detailAttachment>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!--  底部导航栏及签名导出  -->
      <bottomGuide v-if="isTrue"
        :approvalStatus="approving"
        exportMethod="get"
        methodGetPageType="exportShipOrder"
        :curPageId="$route.params.id"
        :businessCode="businessCode"
        @handleBack="handleBack"
      />
    </div>
  </div>
</template>

<script>
import verticalTimeLine from "../components/subdetail/verticalTimeLine";
import detailAttachment from "../components/subdetail/attachment";
import { formatNumber } from "@/basa/utils";
import { ishasAgentId } from "@/basa/utils";
import { getOcShipOrderById } from "../api/index";
import publicComponent from "@/basa/components/public";
export default {
  name: "sub-detail",
  components: {
    detailAttachment,
    verticalTimeLine,
    bottomGuide: publicComponent.bottomGuide
  },
  data() {
    return {
      isTrue: false,
      businessCode: "",
      activeName: "a",
      approving: "1", // 审批状态
      approvingStatus: true, // 审批状态展示
      approvingType: {
        2: "approving", // 审批中
        3: "withdrawn", // 已撤回
        4: "approvaled", // 审批通过
        5: "sendback", // 审批退回
        6: "unapproval" // 审批不通过
      },
      activities: [],
      testData: [],
      form: {},
      focus: "formDateBUI",
      basicInfoObj: {},
      basicInfo: [
        { label: "发货单编号", value: "shipCode" },
        { label: "发货单名称", value: "shipName" },
        { label: "订单编号", value: "orderNo" },
        { label: "订单名称", value: "orderName" },
        { label: "合同编号", value: "contractCode" },
        { label: "合同名称", value: "contractName" },
        { label: "填报单位", value: "reportInOrgName" },
        { label: "发货单状态", value: "shipStatusStr" },
        { label: "订单生效时间", value: "orderEffectiveDate" },
        { label: "订单确认时间", value: "receiveTime" },
        { label: "订单联系人", value: "contractPerson" },
        { label: "订单联系人电话", value: "contractPersonTel" },
        { label: "发货单编制人", value: "compileUser" },
        { label: "发货单编制时间", value: "compileDate" },
        { label: "订单备注", value: "remark", span: 18 },
        { label: "发货单备注", value: "shipRemark", span: 18 }
      ],
      tableData: [],
      tableColumnContractList: [
        {
          type: "index",
          label: "序号",
          width: "59",
          fixed: "left"
        },
        {
          label: "司机姓名",
          prop: "person"
        },
        {
          label: "联系电话",
          prop: "phone"
        },
        {
          label: "车牌号",
          prop: "carNumber"
        }
      ],
      tableDataList: [],
      tableColumnList: [
        {
          type: "index",
          label: "序号",
          fixed: true
        },
        {
          label: "设备物资编码",
          prop: "materialsCode",
          width: "110",
          fixed: true
        },
        {
          label: "设备物资名称",
          prop: "materialsName",
          width: "300",
          fixed: true
        },
        {
          label: "设备物资说明",
          prop: "matDescribe",
          width: "130"
        },
        {
          label: "分类名称",
          prop: "thirdCategoriesOfName",
          width: "130"
        },
        {
          label: "计量单位",
          prop: "currentMeasuringUnit",
          width: "100"
        },
        {
          label: "订单数量",
          prop: "num",
          width: "140"
        },
        {
          label: "已发货数量",
          prop: "deliveredNum",
          width: "140"
        },
        {
          label: "已验收数量",
          prop: "acceptedNum",
          width: "140"
        },
        {
          label: "未发货数量",
          prop: "undeliveredNum",
          width: "140"
        },
        {
          label: "本次发货数量",
          prop: "currentNum",
          width: "140"
        },
        {
          label: "交货地点",
          prop: "listAddress",
          width: "200"
        },
        {
          label: "收货人",
          prop: "consignee",
          width: "130"
        },
        {
          label: "收货人电话",
          prop: "consigneePhone",
          width: "130"
        },
        {
          label: "生产厂家/品牌",
          prop: "manufacturer",
          width: "130"
        },
        {
          label: "到货时间",
          prop: "arrivalDate",
          width: "130"
        },
        {
          label: "预计送达时间",
          prop: "expectedDeliveryDate",
          width: "130"
        },
        {
          label: "备注",
          prop: "remark",
          width: "100"
        }
      ],
      timelineItemProps: {
        timestamp: "orderRecord",
        title: "orderStatus",
        timer: "orderDate"
      }
    };
  },
  methods: {
    getOcShipOrderById() {
      getOcShipOrderById({ id: this.$route.params.id }).then(res => {
        this.basicInfoObj = res.data.data.ocShipOrder;
        if (this.basicInfoObj.compileDate) {
          this.basicInfoObj.compileDate =
            this.basicInfoObj.compileDate.substring(0, 10);
        }
        if (this.basicInfoObj.orderEffectiveDate) {
          this.basicInfoObj.orderEffectiveDate =
            this.basicInfoObj.orderEffectiveDate.substring(0, 10);
        }
        if (this.basicInfoObj.receiveTime) {
          this.basicInfoObj.receiveTime =
            this.basicInfoObj.receiveTime.substring(0, 10);
        }
        this.testData = res.data.data.ocShipLogList;
        this.tableData = res.data.data.ocShipInfoBO;
        this.tableDataList = res.data.data.ocShipList;
        this.tableDataList.forEach(item => {
          item.num = formatNumber(item.num, 3);
          item.deliveredNum = formatNumber(item.deliveredNum, 3);
          item.acceptedNum = formatNumber(item.acceptedNum, 3);
          item.currentNum = formatNumber(item.currentNum, 3);
          item.undeliveredNum = formatNumber(item.undeliveredNum, 3);
          item.onWayNum = item.deliveredNum - item.acceptedNum;
          item.listAddress =
            item.deliveryAreaName +
            item.provinceName +
            item.cityName +
            item.countyName +
            item.deliveryPoints;
          if (item.arrivalDate) {
            item.arrivalDate = item.arrivalDate.substring(0, 10);
          }
        });
        res.data.data.ocFilesBO.forEach(item => {
          item.createTimeStr = item.uploadTime.replace(/-/g, "/");
          item.fileSize = Math.round(item.fileSize / 1024) + "kb";
        });
        this.$refs.attachment.tableData = res.data.data.ocFilesBO;
        this.isTrue = true;
      });
    },
    handleBack() {
      // this.$router.push("/orderManagement/close/un-closed");
      this.$router.go(-1);
    },
    // 导出
    tabChange(item, index) {
      this.focus = item[0];
      this.$refs[item[0]].$el.scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start" // 上边框与视窗顶部平齐。默认值
      });
    }
  },
  activated() {
    this.getOcShipOrderById();
  },
  deactivated() {
    this.isTrue = false;
  },
  //   beforeRouteEnter(to, from, next) {
  //     console.log(to, 'lookMe')
  //     console.log(from)
  //     !(to.fullPath === from.fullPath) &&
  //       sessionStorage.setItem('fromPath', from.fullPath)
  //     next()
  //   },
  // 更改列表缓存状态
  beforeRouteLeave(to, from, next) {
    if (this.submitFlag === true) {
      for (var key in this.$vnode.parent.parent.componentInstance.cache) {
        delete this.$vnode.parent.parent.componentInstance.cache[
          ishasAgentId(to.path, key)
        ];
      }
    }
    next();
  }
};
</script>

<style lang="scss" scoped>
.detail-info {
  width: calc(100% - 438px);
  min-height: calc(100vh - 260px);
  float: left;
  background: #fff;
  position: relative;
  padding: 14px 20px 0 20px;
  margin: 15px 0 80px;
}
/deep/.el-table td,
.el-table th {
  padding: 0 0;
}
.detail-info-el-Label {
  position: absolute;
  width: 107px;
  right: 33px;
  top: 31px;
  z-index: 1;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}

/deep/ .el-table {
  /deep/ th {
    padding: 0;
    // heigth: 36px;
    line-height: 36px;
  }

  .el-table__body {
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}
</style>
